<template>
  <div class="punch">
    <van-nav-bar
      title="质量问题上报"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    
    <div class="page-content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="form.title"
          name="title"
          label="问题标题"
          placeholder="请输入问题标题"
          :rules="[{ required: true, message: '请填写问题标题' }]"
        />
        
        <van-field
          v-model="form.location"
          name="location"
          label="问题位置"
          placeholder="请输入问题位置"
          :rules="[{ required: true, message: '请填写问题位置' }]"
        />
        
        <van-field
          v-model="form.description"
          name="description"
          label="问题描述"
          type="textarea"
          rows="4"
          placeholder="请详细描述发现的质量问题"
          :rules="[{ required: true, message: '请填写问题描述' }]"
        />
        
        <div class="upload-section">
          <div class="section-title">问题照片</div>
          <van-uploader
            v-model="form.images"
            multiple
            :max-count="5"
            :after-read="afterRead"
          />
          <div class="upload-tip">最多上传5张照片，单张不超过10MB</div>
        </div>
        
        <van-field name="severity" label="问题严重程度">
          <template #input>
            <van-dropdown-menu>
              <van-dropdown-item v-model="form.severity" :options="severityOptions" />
            </van-dropdown-menu>
          </template>
        </van-field>
        
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交上报</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "PunchView",
  data() {
    return {
      form: {
        title: "",
        location: "",
        description: "",
        images: [],
        severity: "中"
      },
      severityOptions: [
        { text: "轻微", value: "轻微" },
        { text: "中等", value: "中" },
        { text: "严重", value: "严重" },
        { text: "紧急", value: "紧急" }
      ]
    };
  },
  methods: {
    afterRead(file) {
      // 此处可以添加上传逻辑
      console.log(file);
    },
    onSubmit(values) {
      // 提交表单
      this.$toast.loading({
        message: '提交中...',
        forbidClick: true,
      });
      
      // 模拟提交
      setTimeout(() => {
        this.$toast.success('提交成功');
        this.$router.push('/records');
      }, 1500);
      
      console.log('提交的表单数据:', values);
    }
  }
};
</script>

<style scoped>
.punch {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.page-content {
  margin-top: 46px;
  flex: 1;
  overflow-y: auto;
}

.upload-section {
  padding: 16px;
  background-color: #fff;
}

.section-title {
  margin-bottom: 8px;
  font-size: 14px;
  color: #646566;
}

.upload-tip {
  margin-top: 8px;
  font-size: 12px;
  color: #969799;
}
</style> 